<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>坐标转换</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 553px;
            border:1px solid #3473b7;
        }
        #mousePositionDiv{
            position: absolute;
            z-index: 99;
            left:0px;
            top:10px;
            font-family: Arial;
            font-size: smaller;
            text-align: left;
            width:360px;
        }
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src = '../libs/SuperMap.Include.js'></script>
    <script type ="text/javascript">
         var map,layer,
         host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
         url = host + "/iserver/services/map-world/rest/maps/World";
         function init(){
             //初始化地图
             map = new SuperMap.Map("map",{controls:[
             new SuperMap.Control.Zoom(),
             new SuperMap.Control.Navigation()]});
             //初始化图层
             layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null,{maxResolution:"auto"});
             //监听图层信息加载完成事件
             layer.events.on({"layerInitialized":addLayer});
             map.events.on({"mousemove":getMousePositionPx});
             setposition();
             addHandler(window,"resize",setposition);
         }
         //异步加载图层
         function addLayer(){
             map.addLayer(layer);
             //显示地图范围
             map.setCenter(new SuperMap.LonLat(0,0), 0);
         }
         function getMousePositionPx(e)
         {
			 var lonlat=   map.getLonLatFromPixel(new SuperMap.Pixel(e.xy.x,e.xy.y));
			 
             var newHtml="地图坐标转换：像素坐标与地理位置坐标转换<br>  鼠标像素坐标："  + "x="+Math.floor(e.clientX)+"，"+"y="+Math.floor(e.clientY) +
                     "<br>位置坐标："+ "lon="+ lonlat.lon.toFixed(5) + "，" + "lat="+
                     lonlat.lat.toFixed(5);
                     document.getElementById("mousePositionDiv").innerHTML=newHtml;
         }
        function addHandler(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,handler);
            } else{
                element["on"+type] =handler;
            }
        }

       function setposition(){
           var width= map.getSize().w;
           document.getElementById("mousePositionDiv").style.left=width/2-160+"px" ;
       }
   </script>
</head>
<body onLoad = "init()">
<div id='mousePositionDiv' class='smCustomControlMousePosition'></div>
<div id = "map"></div>
</body>
</html>